<!--评价弹框-->
<template>
	<div>
		<van-popup
		  v-model="showEvaluatePopup"
		  position="right"
		  :overlay="false"
		  :style="{ height: '100%',width:'100%' }"
		> 	
		<div class="html_a">
			<van-nav-bar
			  title="评价"
			  left-arrow
			  :border="false"
			>	
			  <van-icon name="arrow-left" slot="left" color="#000" size="20" @click="hidden"/>
		   </van-nav-bar>	
		    <div class="evaluate_wrap">
				<van-field 
				  v-model="params.commentTxt"
				  rows="5"
				  autosize
				  label-width='0'
				  type="textarea"
				  placeholder="聊聊这次交易您的感受"		  
				/> 	 
				
				
				<div class="imgList">
					<div v-for="(item,index) in imgList" class="imgContain" :key="index">
						<div class="clear" @click="delImg(index)">
							<img src="../../../../static/img/lanhu/43.png" alt="" style="width: 13px;height: 13px;"/>
						</div>
						<img :src="item" alt=""/>
					</div>
					
	                <div v-if="imgList.length<3" @click="getImgUrl(imgList.length,3)" class="imgContain">
	                	<img src="../../../../static/img/lanhu/90.png" alt=""/>
	                </div>
				</div>			
		    </div>
		    
	 
			
			<div class="c">
				<div class="c1" :class="{active:params.commentIsgood==1}" @click="changeActice(1)"> 
					<span><img src="../../../../static/img/lanhu/89.png" alt="" /></span>
					<span>赏好评</span>
				</div>
				<div class="c1" :class="{active:params.commentIsgood==0}" @click="changeActice(0)">
					<span><img src="../../../../static/img/lanhu/88.png" alt="" /></span>
					<span>不赏</span>
				</div>
			</div>
			
			
			<div class="d">
				<div class="d1">
					<van-button color="#ffda44" block class="d2" @click="publish">发表评价</van-button>
				</div>
			</div>
	  
		</div>	
		</van-popup>
	</div>
</template>

<script>

import {getFun,getTimer} from '@/api/publicFun.js'	 
let publicFun=getFun()		
export default {
	name: 'evaluate',	
	data() {
       return {
       	  showEvaluatePopup:false,          
          params:{
          	commentImage:'',  // 评价图片
          	commentTxt:'',    // 评价内容
          	goodsId:'',       // 
          	ordersId:'',
          	userId:'',
          	commentIsgood:-1,
          },
          url1:this.$api+'/marketorderservice/api/v1/market/addCommnet',
          imgList:[],             // 用于绑定已上传的图片数组（组件内部使用，在删除图片时用到）          
          index:'',
          item:{},
       }
	},
	methods: {	
		showWin(item,index){
		  this.showEvaluatePopup=true
		  this.params.goodsId=item.goodsId
		  this.params.ordersId=item.ordersId
		  this.params.commentImage=''
		  this.params.commentTxt=''
		  this.params.commentIsgood=-1
		  this.imgList=[]
		  this.index=index
		  this.item=item
		},
		// 隐藏
	    hidden(){
	   	 this.showEvaluatePopup=false
	    },
		// 删除图片
		delImg(index){
			this.imgList.splice(index,1)
			this.params.commentImage=this.imgList.join()
		},	    
		// 获取图片地址后的回调
		callJSGetImgUrl(str){
			this.imgList=this.imgList.concat(str.split(','))
			this.params.commentImage=this.imgList.join()
		},	   
        changeActice(num){
       	    this.params.commentIsgood=num
        },
        publish(){
          if(this.params.commentTxt==''){
          	this.$toast('评价内容不能为空')
          	return false
          }
          if(this.params.commentIsgood==-1){
          	this.params.commentIsgood=''
          }
       	  let that=this
	      this.$Axios.Post(this.url1,this.params)
	      .then(function(res) {
			  that.showEvaluatePopup=false  
			  that.$emit('reload',that.index)
	      })        	
        }
	},
	mixins:[publicFun],//混入		
	mounted() {
		this.params.userId=this.$router.currentRoute.query.userId;	
		window.callJSGetImgUrl=this.callJSGetImgUrl  // 挂载获取图片回调方法
	}
}	
</script>

<style scoped="" lang="scss">
*{box-sizing: border-box;}
.html_a{background: #f8f8f8;height: 100%;width: 100%;position: absolute;}
.van-cell:not(:last-child)::after{border-bottom: none;}
.evaluate_wrap{padding: 10px;
  .imgList{background: #fff;padding: 10px}
  .imgContain{img{width: 80px;height: 80px;display: block;}}
}

.imgList:after{content:"";display:block;clear:both;}
.imgList .imgContain{float: left;margin-right: 3%;width:23.5%;margin-bottom: 10px;position: relative;}
.imgList .imgContain img{width: 100%;height: 80px;}
.imgList .imgContain:nth-child(4n){margin-right: 0;}
.clear{position: absolute;right: -6px;top: -6px;z-index: 100;}



.b{padding: 10px 0;text-align: center;font-size: 14px;}
.c{padding: 0 10px;display: flex;justify-content: space-between;}
.c1{background: #eee;width: 49%;padding: 10px 0;font-size: 14px;display: flex;justify-content: center;border:1px solid transparent}
.c1.active{border:1px solid #ffda44;background: #FFD630;}
.c1 img{display: block;margin-right: 6px;width: 18px;height: 18px;}
.d{width: 100%;padding: 10px;margin-top: 50px;}
.van-button__text{color: #000;font-size: 16px;}
</style>